<!-- Player 组件 -->
<template>
  <div :id="getPlayerId" />
</template>

<script lang="ts">
import { ref, computed, watch, onMounted, nextTick, onBeforeUnmount } from 'vue'

export default {
  props: {
    options: {
      type: Object,
      default: () => ({ source: '' })
    }
  },
  emits: ['timeUpdate', 'video-status'],
  setup(props, { emit }) {
    const videoPlayer = ref(null)
    const hasInit = ref(false)
    const isSeek = ref(false)
    const getPlayerId = computed(() => props.options?.id || 'player')

    const initPlayer = () => {
      const player = new Aliplayer(
        {
          ...props.options,
          hideControl: true,
          id: getPlayerId.value,
          autoplay: true,
          width: '100%',
          height: '100%',
          components: [
            Aliplayer.Component({
              timeupdate(player) {
                emit('timeUpdate', {
                  status:
                    isSeek.value || Number.isInteger(player.getCurrentTime()) ? 'skip' : 'playing',
                  currentTime: player.getCurrentTime(),
                  duration: player.getDuration()
                })
              },
              ready(player) {
                emit('video-status', {
                  status: 'ready',
                  currentTime: player.getCurrentTime(),
                  duration: player.getDuration()
                })
              }
            })
          ],
          skinLayout: props.options.hideControl && []
        },
        function (player) {
          if (player.getOptions().autoplay) player.mute()
        }
      )

      videoPlayer.value = player

      player.on('startSeek', () => {
        isSeek.value = true
      })
      player.on('completeSeek', () => {
        isSeek.value = false
      })
      hasInit.value = true
    }

    const handleParentEvent = (event) => {
      console.log('触发方法', event.detail)
      toggleFullScreen()
    }

    const toggleFullScreen = () => {
      const playerElement = document.getElementById(getPlayerId.value)
      if (!playerElement) return

      if (document.fullscreenElement) {
        document.exitFullscreen()
      } else {
        playerElement.requestFullscreen()
      }
    }

    watch(
      () => props.options,
      (val) => {
        if (props.options.id && props.options.source) {
          if (!hasInit.value) {
            initPlayer()
          } else {
            videoPlayer.value.dispose()
            nextTick(initPlayer)
          }
        }
      }
    )

    onMounted(() => {
      if (props.options.id && props.options.source && !hasInit.value) {
        initPlayer()
      }
      window.addEventListener('parentEvent', handleParentEvent)
    })

    onBeforeUnmount(() => {
      window.removeEventListener('parentEvent', handleParentEvent)
      videoPlayer.value?.dispose()
    })

    return {
      getPlayerId,
      toggleFullScreen
    }
  }
}
</script>

<style>
.prism-player .prism-ErrorMessage .prism-error-operation {
  border-bottom: none;
}
.prism-player .prism-ErrorMessage .prism-error-operation .prism-button-refresh {
  display: none;
}
.prism-player .prism-ErrorMessage .prism-detect-info {
  display: none;
}
</style>
